<template>
	<view class="page-container">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" placeholder="请输入要搜索的内容" v-model="recodes" @input="search" clearButton="none"
			cancelButton="none">
			</uni-search-bar>
		</view>
		<view class="record-list">
			<view class="record-item" v-for="(record, index) in records" :key="index">
				<view class="record-title">{{ record.service_name }}</view>
				<view class="record-user">下单用户：{{ record.nick_name }}</view>
				<view class="record-amount">实付金额：¥{{ record.order_price }}</view>
				<view class="record-time">核销时间：{{ record.verificationtime }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import request from '../../../utils/request';
onLoad(()=>{
	request({
		url:'merchant/verificationRecord/list/'+uni.getStorageSync('userinfo').mid,
		method:'get',
		success(res){
			console.log(res);
			
			records.value=res.data
			records.value.forEach(item=>{
				item.verificationtime=formatDate(new Date(item.verificationtime))
			})
		},
		fail(err){
			console.log(err);
			
		}
		
	})
})
function formatDate(date) {
    const year = date.getFullYear().toString().slice(2);
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}`;
}
	let recodes=ref('')
	const records = ref([])
	function backPage(){
		uni.navigateBack()
	}
	function search(res){
	
	recodes.value=res
	request({
		url:'merchant/verificationRecord/list/'+uni.getStorageSync('userinfo').mid+'/'+res,
		method:'get',
		success(res){
			console.log(res);
			
			records.value=res.data
			records.value.forEach(item=>{
				item.verificationtime=formatDate(new Date(item.verificationtime))
			})
		},
		fail(err){
			console.log(err);
			
		}
		
	})
	}
</script>

<style scoped>
.page-container{
	width: 100%;
}
.map {
  width: 100%;
  height: 300rpx;
}

.card {
  color: red;
  padding-bottom: 100rpx;
}

.top {
  width: 100%;
  height: 400rpx;
  background-color: #0091ff;
  background-size: 100%;
}

.title {
  padding: 30rpx 0rpx;
  font-size: 30rpx;
  text-align: center;
  color: white;
  font-weight: bold;
}
.im {
  width: 40rpx;
  height: 40rpx;
  background-color: skyblue;
  padding: 20rpx;
  border-radius: 20rpx;
}

.grid-item-box {
  flex: 1;
  /* // position: relative; */
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.uni-mt-10 {
  margin-top: 50px;
}
.sales-record {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.search-box {
  position: relative;
  margin-bottom: 20rpx;
}

.search-input {
  width: 100%;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 40rpx;
  padding: 0 80rpx 0 30rpx;
  font-size: 28rpx;
}

.search-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32rpx;
  color: #999;
}

.record-list {
/* 	display: flex;
	justify-content: center; */
	margin-top: -20%;
	width: 95%;
	margin-left: 2%;
}

.record-item {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 50rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.record-title {

  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.record-user {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.record-amount {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	       
		   

</style>
